<template>
  <div :class="className" ref="charRef" :style="{height:height,width:width}" />
</template>

<script setup>
  import * as echarts from 'echarts'
  import {
    nextTick,
    onBeforeUnmount,
    onMounted,
    ref,
    watch
  } from 'vue'
  import {
    listStatistics,
    getStatistics,
    delStatistics,
    addStatistics,
    updateStatistics
  } from "@/api/wms/statistics";
  const props = defineProps({
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      default: () => {
        return {
          yData: [],
          xData: []
        }
      }
      // required: true
    },
    yName: {
      type: String,
      default: '次'
    },
    xName: {
      type: String,
      default: '日'
    },
    seriesName: {
      type: String,
      default: '充电次数'
    },
    itemColor: {
      type: String,
      default: ''
    }
  });

  const chart = ref(null);
  const charRef = ref(null)
  const statisticsList = ref([])

  watch(() => props.chartData, (value) => {
    nextTick(() => {
      if (!chart.value) {
        return;
      }
      setOptions();
    });
  })

  onMounted(() => {
    nextTick(() => {
      initChart()
    })
  })

  function initChart() {
    chart.value = echarts.init(charRef.value, 'lightTheme')
    listStatistics({
      pageNum: 1,
      pageSize: 1090
    }).then(response => {
      statisticsList.value = response.rows;
      var a = []
      var b = []
      var c = []
      for (var i = 0; i < statisticsList.value.length; i++) {
        a.push(statisticsList.value[i].createTime.substring(0, 10))
        b.push(Number(statisticsList.value[i].efficiency))
        c.push(statisticsList.value[i].todayQuantity)
      }
      props.chartData.xData = a
      props.chartData.yData = b
      setOptions()
      // console.log( props.chartData.xData," props.chartData.xData")
      // console.log( props.chartData.yName," props.chartData.yName")
      console.log(b, a, " chart.value")
    });


  }
  onBeforeUnmount(() => {
    if (!chart.value) {
      return
    }
    chart.value.dispose()
    chart.value = null
  })



  function setOptions() {
    chart.value.setOption({
      xAxis: {
        name: props.xName,
        data: props.chartData.xData,
        boundaryGap: false,
        axisTick: {
          show: false
        }
      },
      grid: {
        top: '10%',
        left: '2%',
        right: '6%',
        bottom: '2%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        padding: [5, 5]
      },
      dataZoom: {
        show: true,
        type: 'inside'
      },
      yAxis: {
        name: props.yName,
        axisTick: {
          show: false
        }
      },
      series: [{
        name: props.seriesName,
        itemStyle: {
          color: '#9e86f0',
        },
        lineStyle: {
          color: '#9e86f0',
          width: 2
        },
        areaStyle: {
          opacity: 0.6,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#9e86f0'
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255, .255)'
            }
          ])
        },
        smooth: true,
        type: 'line',
        data: props.chartData.yData,
        animationDuration: 1500,
        animationEasing: 'cubicInOut',
      }]
    })
  }
</script>
